<template>
  <div class="app-container">
    <p class="shenqing">基本信息</p>
    <table border="1" rules="all" class="tablestyle" style="width: 90%">
      <tr>
        <td>图片</td>
        <td>编号</td>
        <td>HC00000027</td>
        <td>名称</td>
        <td>行星摆线针轮减速机</td>
      </tr>
      <tr>
        <td rowspan="3">
          <img style="width: 150px;height: 150px" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591355439947&di=cffec3158554f0c3fad06954631f706c&imgtype=0&src=http%3A%2F%2Fdingyue.ws.126.net%2F5ymTmqLfTKJsvUKiNEEIOSNNiUVpNz5kfLotEO0HyAk2X1541927857415.jpeg" alt="">
        </td>
        <td>分类</td>
        <td>其他设备专用备件</td>
        <td>品牌</td>
        <td>新良田</td>
      </tr>
      <tr>
        <td>规格型号</td>
        <td>XLEDYEJ1.1-8160B-273P=1.1KW</td>
        <td>单位</td>
        <td>台</td>
      </tr>
      <tr>
        <td>所在仓库</td>
        <td>123123</td>
        <td>库存</td>
        <td>5.00</td>
      </tr>

    </table>


    <el-row >
      <p class="shenqing">出入库记录</p>
      <el-table
        :data="tableDataFzr"
        border
        stripe
        style="width: 90%;margin-left: 15px">
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="50">
        </el-table-column>
        <el-table-column
          prop="name"
          label="出/入库时间"
          align="center"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="方向"
          align="center"
          width="180">
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="类型">
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="数量">
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="仓库">
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="关联单号">
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="操作人">
        </el-table-column>
      </el-table>
      <div style="width: 90%">
        <el-pagination
          style="margin-top: 15px;float: right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="40">
        </el-pagination>
      </div>

    </el-row>
    <el-row >
      <p class="shenqing">更换记录</p>
      <el-table
        :data="tableDataFzr"
        border
        stripe
        style="width: 90%;margin-left: 15px">
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="50">
        </el-table-column>
        <el-table-column
          prop="name"
          label="更换时间"
          align="center"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="更换原因"
          align="center"
          width="180">
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="更换数量">
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="设备编号">
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="设备名称">
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="关联单号">
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="更换人">
        </el-table-column>
      </el-table>
      <div style="width: 90%">
        <el-pagination
          style="margin-top: 15px;float: right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="40">
        </el-pagination>
      </div>

    </el-row>
    <el-row >
      <p class="shenqing">关联设备</p>
      <el-table
        :data="tableDataFzr"
        border
        stripe
        style="width: 90%;margin-left: 15px">
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="50">
        </el-table-column>
        <el-table-column
          prop="name"
          label="设备编号"
          align="center"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="设备名称"
          align="center"
          width="180">
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="出厂编号">
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="类别">
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="品牌">
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="规格型号">
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="需求量">
        </el-table-column>
      </el-table>
      <div style="width: 90%">
        <el-pagination
          style="margin-top: 15px;float: right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="40">
        </el-pagination>
      </div>

    </el-row>
  </div>
</template>

<script>
  import { listRole, getRole, delRole, addRole, updateRole, exportRole, dataScope, changeRoleStatus } from "@/api/system/role";


  export default {
    name: "Role",
    data() {
      return {
        currentPage:4,
        //申请信息
        applicationData:{
          bianhao:'',
        },
        //负责人数据
        tableDataFzr:[
          {name:'测试数据'}

        ],
        //巡检路线
        tableDataLx:[
          {name:'测试数据'}
        ]
      };
    },
    created() {
      console.log('接受数据',this.$route.query)

    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }


    }
  };
</script>
<style scoped>
  .shenqing{
    color: #05A380;
    font-weight: 700;
    margin-left: 15px;
  }
  .tablestyle {
    margin-left: 15px;
    border: 1px solid #cccccc;
    color: #606266;
    font-size: inherit;
  }
  .tablestyle tr{
    height: 44px;
  }
  .tablestyle td{
   text-align: center;
  }
  .fujian span{
    margin-left: 15px;
    cursor: pointer;
  }

</style>
